<template>
  <div class="page">
    <div class="c-main p20">
      <div class="c-body">
        <el-row type="flex" justify="center">
          <el-col :span="14">
            <el-form ref="form" :model="pageAjax.data" label-width="120px">
              <el-form-item label="请选择平台">
                <el-cascader
                  v-model="pageAjax.data.platformId"
                  :props="orgCascaderCp.config.props"
                  :options="orgSupAjax.data"
                >
                </el-cascader>
              </el-form-item>
              <div class="mi-upload">
                <div class="mi-title">
                  上传平台图标
                </div>

                <div class="m-files">
                  <div class="m-preview clearfix">
                    <div class="m-file" v-if="pageAjax.data.platformIcon">
                      <div class="m-operation flex item-v-center item-h-center">
                        <i class="el-icon-delete" @click="rDeleteUploadImg"></i>
                      </div>
                      <img :src="pageAjax.data.platformIcon" alt="" />
                    </div>
                    <div
                      class="m-file m-addBtn flex item-v-center item-h-center"
                    >
                      <el-upload
                        class="diy-uploadBtn fr"
                        :action="uploadImgAjax.config.url"
                        :headers="uploadImgAjax.config.headers"
                        :multiple="false"
                        name="file"
                        ref="uploadImg"
                        accept=".jpg, .gif, .jpeg, .png"
                        :show-file-list="false"
                        :disabled="uploadImgAjax.config.disabled"
                        :on-success="rUploadImgSuc"
                        :on-error="rUploadImgFail"
                        :on-progress="rUploadImgProgress"
                        :before-upload="rUploadImgBefore"
                        :limit="1"
                      >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </div>
                  </div>
                </div>
              </div>
              <el-form-item label="招募标准：">
                <el-input
                  placeholder="请输入招募标准"
                  type="textarea"
                  v-model="pageAjax.data.recruitMark"
                ></el-input>
              </el-form-item>

              <el-form-item label="直播时长：">
                <el-input
                  placeholder="请输入直播时长"
                  type="textarea"
                  v-model="pageAjax.data.broadcastTime"
                ></el-input>
              </el-form-item>
              <el-form-item label="待遇：">
                <el-input
                  placeholder="请输入待遇"
                  type="textarea"
                  v-model="pageAjax.data.treatment"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="rSubmitForm">提交</el-button>
                <el-button @click="rBack">取消</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { addH5doc } from "@/api/channel.js";
import { getOffspringnTree } from "@/assets/js/util.js";
import _ from "lodash";

export default {
  name: "seestar_channelCreateH5doc",
  data: () => ({
    pageAjax: {
      btnDisabled: false,
      btnLoading: false,
      loading: false,
      data: {
        broadcastTime: "",
        platformIcon: "",
        platformId: 0,
        platformName: "",
        recruitMark: "",
        treatment: ""
      }
    },
    orgSupAjax: {
      loading: false,
      data: [],
      orginData: []
    },
    uploadImgAjax: {
      loading: false,
      config: {
        disabled: false,
        headers: {
          Authorization: ""
        },
        url: "/bs/upload"
      }
    },
    orgCascaderCp: {
      config: {
        props: {
          value: "id",
          label: "name",
          checkStrictly: true,
          emitPath: false
        }
      }
    }
  }),
  created() {
    let _that = this;

    _that.getOrgData();
    _that.uploadImgAjax.config.headers.Authorization =
      "bearer " + _that.$store.state.sid.access_token;
  },
  methods: {
    rUploadImgSuc(respData) {
      let _that = this;
      _that.uploadImgAjax.config.disabled = false;
      _that.uploadImgAjax.loading.close();
      _that.$refs.uploadImg.clearFiles();
      if (respData.code === _that.STATUS.success[0]) {
        _that.pageAjax.data.platformIcon = respData.data.fileUrl;
        // _that.getPageData();
      } else {
        _that.$message.error({
          message: respData.msg || "上传失败",
          onClose() {}
        });
      }
    },
    rUploadImgFail() {
      let _that = this;
      _that.uploadImgAjax.loading.close();
      _that.uploadImgAjax.config.disabled = false;
      _that.$refs.uploadImg.clearFiles();
      _that.$message.error({
        message: "上传错误，请查看网络或联系管理员",
        onClose() {}
      });
    },
    rUploadImgProgress() {},
    rUploadImgBefore() {
      let _that = this;
      if (_that.pageAjax.data.platformIcon) {
        _that.$message.error({
          message: "平台图标只能上传1张，请删除后再上传",
          onClose() {}
        });
        return false;
      }
      _that.uploadImgAjax.loading = this.$loading({
        text: "上传中。。。",
        lock: true
      });
    },
    rDeleteUploadImg() {
      this.pageAjax.data.platformIcon = "";
    },
    rSubmitForm() {
      let _that = this;
      let formData = _.cloneDeep(_that.pageAjax.data);

      if (!formData.platformId) {
        _that.$message.error("平台不能为空");
        return;
      }
      if (!formData.platformIcon) {
        _that.$message.error("平台图标不能为空");
        return;
      }
      if (
        !formData.recruitMark &&
        !formData.broadcastTime &&
        !formData.treatment
      ) {
        _that.$message.error("招募标准、直播时长、待遇不能都为空");
        return;
      }

      if (_that.pageAjax.loading) {
        return;
      }

      _that.pageAjax.loading = true;
      addH5doc(formData)
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            _that.$message({
              type: "success",
              message: "添加成功",
              onClose: () => {
                _that.goRefresh(-1);
              },
              duration: 1200
            });
          } else {
            _that.$message.error(respData.msg || "添加失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
        });
    },

    getOrgData() {
      let _that = this;
      _that.$store.dispatch("getPlatformList").then(() => {
        let arr = _.cloneDeep(_that.$store.state.wantPlatformList) || [];
        _that.orgSupAjax.orginData = _.cloneDeep(arr);
        // 去掉全部
        for (var i = arr.length; i--; ) {
          if (arr[i].id == 0) {
            arr.splice(i, 1);
            break;
          }
        }

        _that.orgSupAjax.data = getOffspringnTree(_.cloneDeep(arr), 0);
      });
    },
    rBack() {
      this.goRefresh(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-main {
    margin-top: 20px;
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }
  .mi-upload {
    padding: 20px;
    .mi-title {
      margin-bottom: 20px;
    }
    .m-files {
    }
    .m-file {
      position: relative;
      float: left;
      width: 150px;
      height: 150px;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #ebeef5;
      box-sizing: border-box;
      img,
      video {
        display: block;
        width: 100%;
        height: 100%;
      }
      &:hover .m-operation {
        opacity: 1;
      }
    }
    .m-operation {
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      color: #fff;
      transition: opacity 0.4s;
      i {
        font-size: 20px;
        padding: 10px 20px;
      }
    }
    .m-addBtn {
      border: 1px dashed #c0ccda;
      border-radius: 10px;
      font-size: 28px;
      color: #ebeef5;
      &:hover {
        border-color: #409eff;
        color: #409eff;
      }
    }
  }
}
</style>
